﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			div{
				width: 567px; 
				height: 567px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-img="'images/bg.jpg'"></div>
		</div>
	
		<script src="vue.js"></script>
		
		<script>
			Vue.directive('img', {
				inserted: function(el, binding){
					let color = Math.floor(Math.random() * 1000000);
					el.style.backgroundColor = '#' + color;
					let img = new Image();
					img.src = binding.value;
					img.onload = function(){
						el.style.backgroundImage = 'url(' + binding.value + ')';
					}
				}
			})
		
			var vm = new Vue({
				el: '#app',
			})
		</script>
	</body>
</html>